<template>
	<div>
		<el-form :disabled="true" class="dialog-layout" ref="userForm" :rules="rules" :model="state.ruleForm" size="default" label-width="auto">
			<el-row :gutter="35">
				<el-col v-for="(item, index) in state.formList" :key="index" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" prop>
					<template v-if="item.fieldTitle == '用户状态'">
						<el-form-item label="用户状态">
							<el-switch v-model="item.name" :active-value="0" :inactive-value="1" active-text="开启" inactive-text="冻结" />
						</el-form-item>
					</template>
					<template v-else>
						<el-form-item :label="item.fieldTitle">
							<el-input v-model="item.name" :disabled="true" placeholder="空"></el-input>
						</el-form-item>
					</template>
				</el-col>
			</el-row>
		</el-form>
		<div class="dialog-btn">
			<el-button @click="onCancel" size="default">取 消</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';

// 定义父组件传过来的值
const props = defineProps({
	editItem: {
		type: Object,
		default: () => {},
	},
	listItem: {
		type: Array,
		default: () => [] as any,
	},
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['close']);

// 定义变量内容
const state = reactive({
	formList: [] as any,
});
onMounted(() => {
	getTableData();
});

const addFormItemToList = (item: any, key: any, value: any) => {
	state.formList.push({
		name: value,
		fieldTitle: item.fieldTitle,
	});
};

const getTableData = async () => {
	if (props.editItem) {
		props.listItem?.forEach((v: any) => {
			if (props.editItem.hasOwnProperty(v.fieldName)) {
				addFormItemToList(v, v.fieldName, props.editItem[v.fieldName]);
			}
		});
	}
};

// 关闭弹窗
const onCancel = () => {
	emit('close');
};
</script>
